<template>
  <div class="error-page">
    <div class="error-code">500</div>
    <div class="error-desc">{{ t('error.serverError') }}</div>
    <el-button
      type="primary"
      @click="refresh"
    >
      {{ t('error.refresh') }}
    </el-button>
  </div>
</template>

<script setup lang="ts">
  import { useI18n } from 'vue-i18n';

  const { t } = useI18n();

  const refresh = () => {
    window.location.reload();
  };
</script>

<style scoped lang="scss">
  .error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: var(--el-bg-color);

    .error-code {
      font-size: 160px;
      font-weight: 600;
      color: var(--el-color-danger);
      margin-bottom: 24px;
    }

    .error-desc {
      font-size: 24px;
      color: var(--el-text-color-primary);
      margin-bottom: 24px;
    }
  }
</style>
